<template>
	<a-layout>
		<a-layout-header :class="classes.header" class="flx-ce-bet colorBgContainer">
			<Logo :text="logoText" />
			<div :class="classes.rightControl">
				<a-dropdown v-if="isViewBtn" @select="handleViewSelect" :popup-max-height="false">
					<a-button class="borderRadius" :class="[classes.item, classes.viewBtn]" type="text">
						视图模式
						<icon-down />
					</a-button>
					<template #content>
						<a-doption v-for="item in viewData" :key="item.val" :value="item.val">
							<template #icon>
								<icon-check v-if="viewval === item.val" style="font-size: 16px; color: #1e6fff" />
							</template>
							<template #default>{{ item.text }}</template>
						</a-doption>
					</template>
				</a-dropdown>
				<a-button class="borderRadius" :class="[classes.item, classes.viewBtn]" type="text" @click="handleSass"> 轻文档Sass</a-button>
				<a href="http://flowmix.turntip.cn/docx/price" target="_blank" :class="classes.item" class="pubCol">私有化部署</a>
				<a href="https://dooring.vip" target="_blank" :class="[classes.item, classes.hidable]" class="pubCol">更多产品</a>
				<a-popover title="扫码解锁更多黑科技">
					<template #content>
						<a-image src="https://cdn.dooring.cn/FlqY2Ji13zIMMzucQITvryG13m5j" :width="160" />
					</template>
					<a :class="[classes.item, classes.hidable]" class="pubCol">技术交流</a>
				</a-popover>
				<!-- <span :class="classes.item" class="pubCol" @click="handleToggleTheme">
					<icon-sun-fill :class="classes.colorWarningText" v-if="appStore.theme == 'light'" />
					<icon-moon-fill v-else />
				</span> -->
			</div>
		</a-layout-header>
	</a-layout>
</template>

<script setup lang="ts">
// import { useAppStore } from "@/store"
import { useDark, useToggle } from "@vueuse/core"
import { getBodyThemeBg } from "@/utils/index"
import classes from "./index.module.less"

interface PropsType {
	logoText?: string
	isViewBtn?: boolean
}
const emits = defineEmits(["handleViewChange"])
const viewval = ref<string>("1")
const viewData = [
	{ val: "1", text: "连页视图" },
	{ val: "2", text: "分页视图" },
]
const props = defineProps<PropsType>()
// const appStore = useAppStore()
const handleViewSelect = (val: string) => {
	viewval.value = val
	emits("handleViewChange", val)
}
const handleSass = () => {
	window.open("http://orange.turntip.cn/doc")
}

const isDark = useDark({
	onChanged(dark: boolean) {
		// appStore.toggleTheme(dark)
	},
})
const toggleTheme = useToggle(isDark)
const handleToggleTheme = () => {
	toggleTheme()
}
</script>

<style lang="less" scoped>
.arco-dropdown-open .arco-icon-down {
	transform: rotate(180deg);
}
:deep(.arco-dropdown-option-icon) {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 36px;
	width: 12px;
	height: 36px;
}
</style>

